<template>
  <div class="fansList">
    <div v-for="(item, index) in fansList" :key="index" class="fansItem">
      <div class="fansInfo">
        <img class="fansImg" :src="item.face" alt="" @click="toPersonal(item)"/>
        <div class="fans-info">
          <div>{{ item.nick_name }}</div>
          <div class="fans">{{ item.fans }}粉丝</div>
        </div>
      </div>
      <div class="topic">{{ item.topic }}</div>
    </div>
  </div>
</template>

<script>
import { getMyfans ,clickFollowFriend} from "@/api/community";
import { time } from "@/config/time";
export default {
  data() {
    return {
      fansList: [
        {
          name: "小貂蝉",
          fans: "23",
          topic: "上班累啊",
          headerImg: require("@/assets/header.jpg"),
        },
      ],
    };
  },
  mounted() {
    this.$store.commit("SET_PERLEFTMENUSHOW", true);
    this.getfans()
  },
  methods: {
    toPersonal(item) {
      this.$store.commit("SET_PERLEFTMENUSHOW", false);
      this.$router.push({
        path:'/personalpage',
        query: {
          aouthid: item.aouthid
        }
      })
    },
  getfans(){
    let np={
      mid:JSON.parse(localStorage.userInfo).id,
      page: 1,
      pagesize: 1000,
    }
    getMyfans(np).then(res=>{
        if(res.code==1){
          this.fansList=res.data
        }

    })
  }
  },
};
</script>

<style lang="scss" scoped>
.fansList {
  width: calc(1650 / 1920 * 100vw);
  background: #fff;
  position: absolute;
  top: calc(350 / 1920 * 100vw);
  left: calc(240 / 1920 * 100vw);
  padding: calc(10 / 1920 * 100vw) calc(40 / 1920 * 100vw)
    calc(40 / 1920 * 100vw);
  .fansItem {
    margin-top: 20px;
    border-bottom: 1px solid #ccc;
    .fansInfo {
        display: flex;
        align-items: center;
      .fansImg {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .fans-info {
        margin-left: 10px;
        .fans{
            margin-top: 10px;
        }
      }
    }
    .topic{
        padding: 10px 30px;
    }
  }
}
</style>
